<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">选择设施</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" :queryType="'2'" />
          </div>
        </div>
        <div class="cameraview-box">
          <div
            id="video_container"
            class="cameraview-box-one"
          >
            <div
              v-if="startUp === 'true' && cricleAdd"
              class="cricle"
            >
              <countDown
                :start-time="startTime"
                :step="-1"
              />
              <p>预热加载中,请耐心等待</p>
            </div>
            <!-- <iframe
              v-if="showFace === 'play'"
              :src="nowcameraurl"
              style="width: 100%; height: 100%"
            ></iframe> -->
            <div v-if="showFace === 'play'" id="video-container" style="width: 100%; height: 100%"></div>

            <div
              v-if="showFace === 'notCameraList'"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <h1>暂无摄像头</h1>
            </div>
            <div
              v-if="showFace === 'downFlow'"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <h1>萤石云流量不足，功能受限</h1>
            </div>
            <div
              v-if="showFace === 'transCamera'"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            ></div>
            <div
              v-if="showFace === 'notCameraData'"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <h1>未取得该摄像头数据</h1>
            </div>
            <div
              v-if="showFace === 'timeout'"
              style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            >
              <h1>静置超时，请刷新重新启动</h1>
            </div>
            <!-- <div
              id="full_screen"
              class="allScream"
              @click="showscreenT"
            >
              <svg-icon :icon-class=" showscreen ? 'enter-full-screen' : 'exit-full-screen'" />
            </div> -->
          </div>
          <zhcameralist
            :cameralistparam="paramslist"
            @nowcameraurl="getcamerurl"
            @getUploadTime="handleLoading"
          />
          <!-- @cameraInfo="setCameraInfo" -->
          <div style="display: flex; height: 52%; width: 100%">
            <div style="width: 100%; height: 90%">
              <div class="cameraview-box-two-line">
                <div class="cameraview-box-two-line-title">设备控制</div>
              </div>
              <div
                v-if="
                  controshebeilist.length > 0
                "
                class="cameraview-box-two"
              >
                <!-- {{ controshebeilist }} -->

                <div
                  v-for="item in controshebeilist"
                  :key="item.dataItemId"
                  class="zh-contro"
                >
                  <div class="contro-one">
                    <div class="contro-one-title">{{ item.dataItemName }}</div>
                    <div
                      class="contro-one-stau"
                      :style="{ color: getequipmentStyle(item.nowstau) }"
                    >{{ item.nowstau }}</div>
                  </div>
                  <div
                    v-if="item.enumListTypetwo &&item.enumListTypetwo.length > 0"
                    class="contro-two"
                  >
                    <div
                      v-for="(
                        kaiguanitem, kaiguanindex
                      ) in item.enumListTypetwo"
                      :key="kaiguanindex"
                      :class="{'contro-two-zcon':judgePermission(2, 'remoteControl')=== true,'contro-two-zcon-disabled':judgePermission(2, 'remoteControl')=== false}"
                      @click="judgePermission(2, 'remoteControl') ?
                      controlequpmentone(item.dataItemId,kaiguanitem.value, index)
                      : $message.warning('暂无权限')"
                    >
                      {{ kaiguanitem.name }}
                    </div>
                  </div>
                  <div
                    v-else
                    class="contro-two"
                  >
                    <!-- <el-input
                      v-model="item.enumListValue"
                      type="number"
                      style="width:50%; border-radius: 10rpx;"
                    /> -->
                    <el-input-number
                      v-model="item.enumListValue"
                      controls-position="right"
                      :min="0"
                      class="inputnumber"
                    />
                    <div v-if="item.dataTypeId == '193'" class="unit">kg</div>
                    <div
                      class="contro-two-zcon"
                      @click="controlequpmentone(item.dataItemId,item.enumListValue)"
                    >
                      {{ '启动' }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-else
                class="cameraview-box-two cameraview-box-two-ds"
              >
                <h2>当前无可控设备</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="cameralist-box">
          <div class="cameraview-box-two-line">
            <div class="cameraview-box-two-line-title">策略控制</div>
          </div>
          <div class="cameraview-box-two">
            <div
              v-if="judgePermission(2, 'strategyControl')"
              class="celu-but"
              @click="clickconfigcelue()"
            >配置策略</div>
            <!-- <div class="celu-but" v-if="false" @click="clickpeizhicelue()">配置策略</div> -->
            <div class="cameraview-box-main">
              <div
                v-if="tableDeviData.length > 0"
                class="dig-view"
              >
                <div
                  v-for="(newitem, newindex) in tableDeviData"
                  :key="newindex"
                >
                  <i class="title-1"></i>
                  <div
                    v-if="newitem.title.device"
                    class="dig-view-item-title"
                  >{{ newitem.title.device.deviceName }}</div>
                  <div
                    v-for="(newzhitem, newzhindex) in newitem.tableDeviData"
                    :key="'tabone' + newzhindex"
                  >
                    <!-- <div>状态：开启</div> -->
                    <div class="dig-view-item-name">
                      <div
                        v-if="newzhitem.priority"
                        class="dig-view-item-name-line2"
                        :style="{
                          backgroundColor: colorList[newzhitem.priority],
                        }"
                      >{{ priorityList[newzhitem.priority - 1].name }}</div>
                      <div class="dig-view-item-name-line1">策略{{ newzhindex + 1 }}</div>
                    </div>
                    <hr />
                    <div>条件配置</div>
                    <div
                      v-for="(
                        newzhitemone, newzhindexone
                      ) in newzhitem.judgelist"
                      :key="'tabtwo' + newzhindexone"
                    >
                      关联关系{{ newzhindexone + 1 }}: 数据项：{{
                        changedataitem(newzhitemone.dataItemId)
                      }}
                      <br />
                      判断条件：{{ newzhitemone.signBit }} 值:{{
                        newzhitemone.value
                      }}
                    </div>
                    <hr />
                    <div>控制配置</div>
                    <div
                      v-for="(
                        newzhitemtwo, newzhindextwo
                      ) in newzhitem.controllist"
                      :key="newzhindextwo"
                    >
                      关联关系{{ newzhindextwo + 1 }}： 数据项：{{
                        changedataitem(newzhitemtwo.dataItemId)
                      }}
                      <br />
                      控制时间：{{ newzhitemtwo.controlMinute }} 值:{{
                        newzhitemtwo.value
                      }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-else
                class="dig-view cameraview-box-two-ds"
              >
                <h2>当前无策略</h2>
              </div>
            </div>
            <!-- <div class="cameracontrol-box">
              <cameracontrol ref="cameracontrol"></cameracontrol>
            </div> -->

          </div>
          <!-- <zhcameralist :cameralistparam="paramslist" @nowcameraurl="getcamerurl" /> -->
        </div>
        <!-- 开关验证码弹框 -->
        <el-dialog
          title="输入验证码"
          :visible.sync="yanzhengcodeview"
          width="30% !important"
          class="yanzheng"
        >
          <div class="dig-yanzhencode">
            <div>
              <img :src="nowcodeimg" />
              <div
                class="changecodeimg"
                @click="openyanzhencode()"
              >看不清换一张</div>
            </div>
            <el-input
              v-model="nowcodetwo"
              placeholder="请输入验证码"
            />
          </div>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="success"
              @click="yanzhengcodeview = false"
            >取消</el-button>
            <el-button
              type="primary"
              @click="yanzhengcode()"
            >确认执行</el-button>
          </span>
        </el-dialog>
        <!-- 策略配置主弹框 -->
        <el-dialog
          title="策略配置"
          :visible.sync="showpeizhicelue"
          width="40%"
        >
          <div class="dig-message">
            <!-- vrtuallist -->
            <!--            <div class="dig-tip">-->
            <!--              提示：请先虚拟设备，才能正确新增策略-->
            <!--            </div>-->
            <div class="dig-line">
              <div class="dig-line-item">
                设备选择：
                <el-select
                  v-model="strategyAllMessage.deviceNo"
                  @change="getdataitemlist"
                >
                  <el-option
                    v-for="item in vrtuallist"
                    :key="item.deviceNo"
                    :value="item.deviceNo"
                    :label="item.device ? item.device.deviceName : ''"
                  />
                </el-select>
              </div>
              <div class="dig-line-item">
                上报时间
                <!--(分钟)-->
                ：
                <el-input
                  v-model="strategyAllMessage.strategyuptime"
                  class="input-yem-sty"
                  placeholder="建议五分钟"
                  type="number"
                >
                  <template slot="append">分钟</template>
                </el-input>
              </div>
            </div>
            <div class="dig-view">
              <div class="dig-view-title">条件配置</div>
              <div class="back">
                <div
                  class="addback"
                  @click="addconditconfig()"
                >
                  <i class="el-icon-plus"></i>
                </div>
                <div
                  class="delback"
                  @click="delconditconfig()"
                >
                  <i class="el-icon-minus"></i>
                </div>
              </div>
              <div
                v-for="(
                  itemone, indexone
                ) in strategyAllMessage.conditionConfig"
                :key="indexone"
                class="dig-view-main"
              >
                <div class="dig-view-main-item">
                  数据项
                  <el-select
                    v-model="
                      strategyAllMessage.conditionConfig[indexone].dataItemId
                    "
                    clearable
                    class="input-yem-sty"
                  >
                    <el-option
                      v-for="(newitem, newindex) in dataitemsList"
                      :key="newindex"
                      :label="newitem.dataItemName"
                      :value="newitem.dataItemId"
                    />
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  判断条件
                  <el-select
                    v-model="
                      strategyAllMessage.conditionConfig[indexone].signBit
                    "
                    class="input-yem-sty"
                  >
                    <el-option
                      v-for="(conditem, condindex) in zhconditionlist"
                      :key="condindex"
                      :label="conditem.name"
                      :value="condindex"
                    />
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  判断值
                  <el-input
                    v-model="strategyAllMessage.conditionConfig[indexone].value"
                    type="number"
                    class="input-yem-sty"
                  />
                </div>
              </div>
            </div>
            <div class="dig-view">
              <div class="dig-view-title">控制策略</div>
              <div class="back">
                <div
                  class="addback"
                  @click="addcontrolconfig()"
                >
                  <i class="el-icon-plus"></i>
                </div>
                <div
                  class="delback"
                  @click="delcontrolconfig()"
                >
                  <i class="el-icon-minus"></i>
                </div>
              </div>
              <div
                v-for="(itemtwo, indextwo) in strategyAllMessage.controlConfig"
                :key="indextwo"
                class="dig-view-main"
              >
                <div class="dig-view-main-item">
                  数据项
                  <el-select
                    v-model="
                      strategyAllMessage.controlConfig[indextwo].dataItemId
                    "
                    clearable
                    class="input-yem-sty"
                    @change="setcontrolvaluelist($event, indextwo)"
                  >
                    <el-option
                      v-for="(newitem, newindex) in dataItemList"
                      :key="newindex"
                      :label="newitem.dataItem.dataItemName"
                      :value="newitem.dataItemId"
                    />
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  控制时长
                  <!--  (分) -->
                  <el-input
                    v-model="
                      strategyAllMessage.controlConfig[indextwo].controlMinute
                    "
                    type="number"
                    class="input-yem-sty"
                  >
                    <template slot="append">分</template>
                  </el-input>
                </div>
                <div class="dig-view-main-item">
                  值
                  <el-select
                    v-model="strategyAllMessage.controlConfig[indextwo].value"
                    placeholder="请先选择数据项"
                    class="input-yem-sty"
                  >
                    <el-option
                      v-for="newvalueitem in itemtwo.valueselectlist"
                      :key="newvalueitem.id"
                      :label="newvalueitem.name"
                      :value="newvalueitem.id"
                    />
                  </el-select>
                  <!-- <el-input v-model="strategyAllMessage.controlConfig[indextwo].value" placeholder="请先输入数据项" class="input-yem-sty" /> -->
                </div>
              </div>
            </div>
            <div class="dig-line">
              <div class="tempbut green">取消</div>
              <div
                class="tempbut tempcolor"
                @click="clicksaveconfig"
              >保存到预览</div>
            </div>
            <div class="celuconfigshowview">
              <div>策略配置预览表</div>
              <el-button
                v-if="isshowpriorityinput === false"
                class="showviewbut"
                type="warning"
                plain
                @click="clickpriorityconfig()"
              >配置优先级</el-button>
              <el-button
                v-else
                class="showviewbut"
                type="warning"
                plain
                @click="savepriorityconfig()"
              >保存优先级</el-button>
            </div>
            <div class="dig-views">
              <div
                v-for="(newzhitem, newzhindex) in tableData"
                :key="'tabone' + newzhindex"
              >
                <!-- <div>状态：开启</div> -->
                <div class="dig-view-item-name">
                  <div class="dig-view-item-name-line1">策略{{ newzhindex + 1 }}</div>
                  <div
                    v-if="newzhitem.priority"
                    class="dig-view-item-name-line2"
                    :style="{ backgroundColor: colorList[newzhitem.priority] }"
                  >{{ priorityList[newzhitem.priority - 1].name }}</div>
                  <div
                    v-if="isshowpriorityinput"
                    class="dig-view-item-name-line3"
                  >
                    <el-select
                      v-model="newzhitem.priority"
                      placeholder="暂无优先级"
                    >
                      <el-option
                        v-for="(proitem, proindex) in priorityList"
                        :key="proindex"
                        :value="proitem.value"
                        :label="proitem.name"
                      />
                    </el-select>
                  </div>
                </div>
                <div>条件配置</div>
                <div
                  v-for="(newzhitemone, newzhindexone) in newzhitem.judgelist"
                  :key="'tabtwo' + newzhindexone"
                >
                  关联关系{{ newzhindexone + 1 }}: 数据项：{{
                    changedataitem(newzhitemone.dataItemId)
                  }}
                  判断条件：
                  <span v-if="newzhitemone.signBit">
                    {{
                      `&${newzhitemone.signBit};`
                    }}
                  </span>
                  值:{{ newzhitemone.value }}
                </div>
                <div>控制配置</div>
                <div
                  v-for="(newzhitemtwo, newzhindextwo) in newzhitem.controllist"
                  :key="newzhindextwo"
                >
                  关联关系{{ newzhindextwo + 1 }}： 数据项：{{
                    changedataitem(newzhitemtwo.dataItemId)
                  }}
                  控制时间：{{ newzhitemtwo.controlMinute }} 值:{{
                    newzhitemtwo.value
                  }}
                </div>
                <div style="display: flex; align-item: center">
                  <div
                    class="tempbut tempcolor"
                    @click="delconfigconditiondata(newzhitem)"
                  >删除</div>
                  <div
                    v-if="!newzhitem.status"
                    class="tempbut tempcolor"
                    @click="editconfigconditiondata(newzhitem)"
                  >启用策略</div>
                  <div
                    v-if="newzhitem.status"
                    class="tempbut green"
                    @click="editconfigconditiondata(newzhitem)"
                  >停用策略</div>
                </div>
              </div>
            </div>
          </div>

          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="success"
              @click="showpeizhicelue = false"
            >取消</el-button>
            <!-- <el-button @click="showpeizhicelue = false">取 消</el-button> -->
            <el-button
              :disabled="isshowpriorityinput"
              type="primary"
              @click="openyanzhencode()"
            >执行策略</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
// import treeSide from "./component/trelist.vue";
import treeSide from "@/components/selectbutton/trelist.vue";

import zhcameralist from "./component/cameralist.vue";
// import cameracontrol from "./component/cameracontrol.vue";
import nowpagereq from "@/api/basic-info-manage/camera-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import countDown from "@/components/count-down/index";
import { mapGetters } from "vuex";
import screenfull from "screenfull";
import EZUIKit from 'ezuikit-js';
var player = null
export default {
  name: "DeviceRemoteControl",
  components: { treeSide, BaseMainSlot, zhcameralist, countDown },
  data() {
    return {
      // 加载动效
      startTime: 60,
      cricleAdd: false,
      showscreen: true,
      startUp: "false",
      loading: true,
      // ---优先级相关---
      // 是否展示等级配置输入框
      isshowpriorityinput: false,
      priorityList: [
        { name: "一级", value: 1 },
        { name: "二级", value: 2 },
        { name: "三级", value: 3 },
        { name: "四级", value: 4 },
        { name: "五级", value: 5 },
        { name: "六级", value: 6 },
        { name: "七级", value: 7 },
        { name: "八级", value: 8 }
      ],
      // 等级颜色列表
      colorList: [
        "rgba(254, 83, 57, 1)",
        "rgba(254, 170, 57, 1)",
        "rgba(165, 214, 63, 1)",
        "rgba(67, 207, 124, 1)",
        "rgba(0, 186, 173, 1)",
        "rgba(42, 130, 228, 1)",
        "rgba(121, 72, 234, 1)",
        "rgba(172, 51, 193, 1)"
      ],
      // -----
      // 验证码弹框
      yanzhengcodeview: false,
      // 验证码
      nowcode: "",
      // 验证码图片
      nowcodeimg: "",
      nowcodetwo: "",
      // 临时存储的设备开关信息
      nowcontrolmessage: {
        zhid: "",
        zhkey: "",
        zhindex: ""
      },
      // 展示已存储策略
      isshowhassave: false,
      tableData: [],
      tableDeviData: [],
      // 详细的一条策略
      lastshowvis: false,
      xiangxideceluone: {
        judgelist: [],
        controllist: [],
        reportTime: ""
      },
      // 是否展示配置策略对话框
      showpeizhicelue: false,
      // 展示已存储策略的选择的虚拟设施id
      showdeviceNo: "",
      // 策略配置信息
      strategyAllMessage: {
        deviceNo: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin" }
        ],
        // 控制策略相关
        controlConfig: [
          {
            dataItemId: "",
            controlMinute: "",
            value: "",
            controlSign: "begin",
            valueselectlist: [{ name: "暂无数据", id: 0 }]
          }
        ]
      },
      // 条件判断list equals = gte  >= gt > lte <= lt<
      zhconditionlist: [
        {
          name: "=",
          value: "equals"
        },
        {
          name: ">=",
          value: "gte"
        },
        {
          name: ">",
          value: "gt"
        },
        {
          name: "<=",
          value: "lte"
        },
        {
          name: "<",
          value: "lt"
        }
      ],
      // 控制策略的值list
      valueselectlist: [
        {
          id: 0,
          name: "禁用"
        },
        {
          id: 1,
          name: "启用"
        }
      ],
      // 可选择数据项
      dataItemList: [],
      dataitemsList: [],
      // 可选择虚拟设备
      vrtuallist: [],
      // 获取可控制设备
      controshebeilist: [],
      // 点击开关index
      controkaiguanindex: "",
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      timer: null
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  mounted() {
    // this.getSetcet();
    // const element = document.getElementById("video_container");
    // document.getElementById("full_screen").addEventListener("click", () => {
    //   if (screenfull.isFullscreen) {
    //     this.showscreen = true;
    //     player.stop().then(() => {
    //       setTimeout(() => {
    //         player.play();
    //       }, 200)
    //     });
    //     screenfull.toggle();
    //   } else {
    //     if (screenfull.isEnabled) {
    //       player.stop().then(() => {
    //         setTimeout(() => {
    //           player.play();
    //         }, 200)
    //       });
    //       screenfull.request(element); // 元素全屏
    //       this.showscreen = false;
    //     }
    //   }
    // });
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  deactivated() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  methods: {
    showscreenT() {
      if (this.showscreen) {
        this.showscreen = false;
        player.fullScreen();
      } else {
        this.showscreen = true;
        player.cancelFullScreen();
      }
    },
    // 点击配置优先级
    clickpriorityconfig() {
      this.isshowpriorityinput = true;
    },
    async getSetcet() {
      const { data: res } = await nowpagereq.getdataitem();
      this.dataitemsList = res;
    },
    // 点击保存优先级
    savepriorityconfig() {
      // 是否都有优先级
      let ishaspriority = true;
      // 是否 没有相同的优先级
      let isnosamepriority = true;
      let listone = [];
      this.tableData.forEach(itemone => {
        if (itemone.priority) {
          let mesone = {
            priority: itemone.priority,
            deviceStrategyId: itemone.deviceStrategyId,
            organizationNo: sessionStorage.organizationNo
          };
          // console.log(itemone.deviceStrategyId)
          let hasmesstau = false;
          listone.forEach(itemtwo => {
            if (itemtwo.priority === itemone.priority) {
              hasmesstau = true;
            }
          });
          if (hasmesstau === false) {
            listone.push(mesone);
          } else {
            isnosamepriority = false;
          }
        } else {
          ishaspriority = false;
        }
      });
      if (ishaspriority && isnosamepriority) {
        nowpagereq.editconfigpriority(listone).then(resone => {
          if (resone.code === 1) {
            this.gethassavetable();
            this.$message.success("保存优先级成功");
            this.isshowpriorityinput = false;
          } else {
            this.gethassavetable();
            this.$message.error("配置优先级失败");
          }
        });
      } else if (ishaspriority === false) {
        this.$message.error("请配置所有优先级！");
      } else if (isnosamepriority === false) {
        this.$message.error("请勿配置相同优先级！");
      }
    },
    // 打开验证码弹框-重新获取验证码
    openyanzhencode() {
      this.nowcodetwo = "";
      this.yanzhengcodeview = true;
      // 获取随机的验证码和图片
      nowpagereq.getcodeimg().then(codres => {
        let listone = codres.data;
        if (listone) {
          this.nowcode = listone.stringCode;
          this.nowcodeimg = "data:image/png;base64," + listone.pictureData;
        }
      });
    },
    // 点击确认按钮
    yanzhengcode() {
      if (this.nowcodetwo === this.nowcode) {
        this.yanzhengcodeview = false;
        if (this.showpeizhicelue) {
          // console.log("准备调用物联网接口")
          this.zhixingtask();
        } else {
          this.controlequpment();
        }
      } else {
        this.$message.error("请输入正确的验证码");
      }
    },
    // 查看详情
    chakanxiangqin(e) {
      this.xiangxideceluone = e;
      // 循环转化
      this.xiangxideceluone.judgelist.forEach((item, index) => {
        this.zhconditionlist.forEach((itemtwo, indextwo) => {
          if (itemtwo.value === item.signBit) {
            this.xiangxideceluone[index].signBit = indextwo;
          }
        });
      });
      this.lastshowvis = true;
    },
    // 点击配置策略
    // clickpeizhicelue() {
    //   this.isshowhassave = true
    //   this.tableData = []
    // },
    // 获取已存储表格
    gethassavetable(e) {
      let par = {
        deviceNo: this.strategyAllMessage.deviceNo || e,
        organizationNo: sessionStorage.organizationNo
      };
      if (par.deviceNo.length === 0) {
        return;
        // this.$message.warning("请先选择一个虚拟设备")
      }
      nowpagereq.queryhassaveconfig(par).then(res => {
        // index报错
        this.tableData = res.data;
        // this.addblankmet()
      });
    },
    // 获取已存储表格
    async gethassavetables(e) {
      this.tableDeviData = [];
      // console.log(e)

      await e.forEach((item, index) => {
        let par = {
          deviceNo: item.deviceNo,
          organizationNo: sessionStorage.organizationNo
        };
        // console.log(par)

        if (par.deviceNo.length === 0) {
          return;
          // this.$message.warning("请先选择一个虚拟设备")
        }
        nowpagereq.queryhassaveconfig(par).then(res => {
          // index报错
          // this.tableDeviData[index] =
          // console.log(index, item, res.data)

          this.$set(this.tableDeviData, index, {
            title: item,
            tableDeviData: res.data
          });
          // this.$set(this.tableDeviData[index], 'tableDeviData', res.data)
          // this.addblankmet()
        });
      });
      // console.log(this.tableDeviData)
    },
    //
    // 表格相关
    handleSelectionChange(e) {
      // console.log(e);
    },
    handleEdit(e) {
      // console.log(e);
    },
    // 点击保存策略
    clicksaveconfig() {
      let params = {
        deviceNo: this.strategyAllMessage.deviceNo,
        controllist: this.strategyAllMessage.controlConfig,
        judgelist: JSON.parse(
          JSON.stringify(this.strategyAllMessage.conditionConfig)
        ),
        reportTime: this.strategyAllMessage.strategyuptime,
        status: false
      };
      if (this.strategyAllMessage.deviceNo === "") {
        this.$message.warning("请选择虚拟设备！");
      }
      if (params.controllist.length == 0 || params.judgelist.length == 0) {
        this.$message.warning("数据至少配置一条");
        return;
      } else {
        let bool = false
        params.controllist.map(el => {
          for (let key in el) {
            if (!el[key] && el[key] !== 0) {
              this.$message.warning("请将数据填写完整");
              bool = true
              return
            }
          }
        })
        if (bool) return
        params.judgelist.map(el => {
          for (let key in el) {
            if (!el[key] && el[key] !== 0) {
              this.$message.warning("请将数据填写完整");
              bool = true
              return
            }
          }
        })
        if (bool) return
      }
      params.judgelist.forEach((yuitem, yuindex) => {
        params.judgelist[yuindex].signBit = JSON.parse(
          JSON.stringify(this.zhconditionlist[yuitem.signBit].value)
        );
      });
      params.controllist = this.strategyAllMessage.controlConfig.map(
        conitem => {
          return {
            dataItemId: conitem.dataItemId,
            controlMinute: conitem.controlMinute,
            value: conitem.value,
            controlSign: conitem.controlSign
          };
        }
      );
      // console.log(params.judgelist);
      // if
      nowpagereq.addconfigconditiondata(params).then(res => {
        if (res.code === 1) {
          this.$message.success("保存到预览成功");
          this.gethassavetable();
        } else {
          this.$message.warning("保存到预览失败");
        }
        // this.showpeizhicelue = false
        // console.log(res.data)
      });
    },
    // 点击删除策略
    delconfigconditiondata(e) {
      nowpagereq.delconfigconditiondata([e.deviceStrategyId]).then(res => {
        if (res.code === 1) {
          this.$message.success("删除成功");
          this.gethassavetable();
        } else {
          this.$message.warning("删除失败");
        }
      });
    },
    // 修改策略--启用或者停用策略
    editconfigconditiondata(e) {
      let param = {
        deviceStrategyId: e.deviceStrategyId,
        status: !e.status
      };
      nowpagereq.editconfigconditiondata(param).then(res => {
        if (res.code === 1) {
          if (e.status === false) {
            this.$message.success("启用策略成功！");
          } else if (e.status === true) {
            this.$message.success("停用策略成功！");
          }
          this.gethassavetable();
        } else {
          this.$message.warning("修改失败");
        }
      });
    },
    // --- ****点击执行策略方法**** ---
    zhixingtask() {
      let list = this.tableData;
      let newlist = {
        reportTime: this.strategyAllMessage.reportTime,
        paramList: []
      };
      let isreq = true;
      if (list.length > 0) {
        list.forEach((itemtwo, indextwo) => {
          if (itemtwo.status) {
            let judgelistone = [];
            itemtwo.judgelist.forEach((itemthree, indexthree) => {
              let judgelisttwo = {
                dataItemId: itemthree.dataItemId,
                judgeSign: itemthree.judgeSign,
                signBit: itemthree.signBit,
                value: itemthree.value
              };
              judgelistone.push(judgelisttwo);
            });
            let controllistone = [];
            itemtwo.controllist.forEach((itemthree, indexthree) => {
              let controllisttwo = {
                dataItemId: itemthree.dataItemId,
                controlSign: itemthree.controlSign,
                controlMinute: itemthree.controlMinute,
                value: itemthree.value
              };
              controllistone.push(controllisttwo);
            });
            // 没有优先级调用接口失败
            if (itemtwo.priority) {
              let newobjpus = {
                priority: itemtwo.priority,
                controllist: controllistone,
                judgelist: judgelistone
              };
              newlist.paramList.push(newobjpus);
            } else {
              isreq = false;
            }
          }
        });
        if (isreq === false) {
          this.$message.error("请先配置策略优先级");
          return;
        }
      }
      // return;
      nowpagereq.editrtualdevice(newlist).then(res => {
        if (res.data) {
          let newmessageone = res.data;
          let pusmessage = {
            rtuRunStrategyNewId: newmessageone.rtuRunStrategyNewId,
            tableName: newmessageone.tableName,
            enable: true,
            deviceNo: this.strategyAllMessage.deviceNo
          };
          this.editlastmetone(pusmessage);
        } else {
          this.$message.error("启用策略失败：errcode1！");
        }
      });
    },
    // 修改状态
    editlastmetone(e) {
      let param = e;
      nowpagereq.neweditconfigconditiondata(param).then(res => {
        if (res.code === 1) {
          this.$message.success("执行策略成功！");
          this.gethassavetable();
        } else {
          this.$message.warning("修改失败");
        }
      });
    },
    // 点击配置策略 ->展示策略
    // clicksettingconfig() {
    //   this.isshowhassave = false
    // },
    // 点击配置策略
    clickconfigcelue() {
      this.showpeizhicelue = true;
      this.strategyAllMessage = {
        deviceNo: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin" }
        ],
        // 控制策略相关
        controlConfig: [
          { dataItemId: "", controlMinute: "", value: "", controlSign: "begin" }
        ]
      };
      this.tableData = [];
      this.dataItemList = [];
    },
    // 增加一条条件配置信息
    addconditconfig() {
      let pusobj = {
        dataItemId: "",
        signBit: "",
        value: "",
        judgeSign: "and"
      };
      if (this.strategyAllMessage.conditionConfig.length === 0) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.conditionConfig.push(pusobj);
    },
    // 减少一条条件配置信息
    delconditconfig() {
      this.strategyAllMessage.conditionConfig.pop();
    },
    // 增加一条控制策略信息
    addcontrolconfig() {
      let pusobj = {
        dataItemId: "",
        controlMinute: "",
        value: 0,
        judgeSign: "and",
        valueselectlist: []
      };
      if (this.strategyAllMessage.controlConfig.length === 0) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.controlConfig.push(pusobj);
    },
    // 减少一条控制策略信息
    delcontrolconfig() {
      this.strategyAllMessage.controlConfig.pop();
    },
    // 点击策略控制的某个数据项
    setcontrolvaluelist(e, i) {
      // console.log(e);

      let listone = this.dataItemList;
      listone.forEach(itemone => {
        // console.log(itemone);

        if (itemone.dataItemId === e) {
          if (itemone.dataItem.enumListType) {
            console.log(itemone.dataItem.enumListType);
            this.strategyAllMessage.controlConfig[
              i
            ].valueselectlist = this.handelthree(itemone.dataItem.enumListType);
          }
        }
      });
    },
    // 点击取消配置
    cacelconfig() {
      this.$confirm("确认是否取消该策略？")
        .then(_ => {})
        .catch(_ => {});
    },
    // 获取地块或设施组下可控制设备
    getcontroshebeilist() {
      nowpagereq.getcontroshebeilist(this.paramslist).then(res => {
        this.controshebeilist = res.data;

        this.handel();
      });
    },
    // 获取数据项选择项和表格
    getdataitemlist(e) {
      // 获取数据项选择项
      nowpagereq.getdataitemtwo(e).then(res => {
        if (res.code === 0) {
          this.$message.error("数据项名称获取失败");
        } else {
          this.gethassavetable();
          // this.dataItemList = res.data;
          let list = [], list2 = []
          res.data.map(el => {
            list.push(el.dataItem)
            if (el.dataItem.control) {
              list2.push(el)
            }
          });
          this.dataItemList = list2;
          this.dataitemsList = list;
        }
      });
    },
    // 将dataitemid => dataitemname
    changedataitem(id) {
      var name = "";
      if (this.dataItemList.length > 0) {
        this.dataItemList.forEach(item => {
          if (item.dataItemId === id) {
            name = item.dataItemName;
          }
        });
      }
      return name;
    },
    // 大于
    // 获取虚拟设备下拉选择
    getvrtuallist(e) {
      nowpagereq.getvrtuallist(e).then(res => {
        if (res.code === 0) {
          this.$message.error("数据项名称获取失败");
        }
        this.vrtuallist = res.data;
        if (this.vrtuallist) {
          // console.log(this.vrtuallist)
          this.gethassavetables(this.vrtuallist);
        } else {
          this.tableDeviData = [];
        }
      });
    },
    // 存储数据并且弹出验证码弹框
    controlequpmentone(id, key, indexone) {
      this.nowcontrolmessage = {
        zhid: id,
        zhkey: key,
        zhindex: indexone
      };
      this.openyanzhencode();
    },
    // 控制机器开关状态-------不可轻易调用
    controlequpment() {
      var params = {
        dataItemId: this.nowcontrolmessage.zhid,
        operation: parseInt(this.nowcontrolmessage.zhkey)
      };
      // console.log(params);

      // return;
      nowpagereq.setshebeikiaguanstau(params).then(res => {
        // 返回值需要确认下
        if (res.data) {
          this.$message.success("控制成功!");
        }
      });
      // 点击开关刷新状态,加五秒延迟
      var _that = this;
      setTimeout(function() {
        _that.getequipmentStau(
          this.nowcontrolmessage.zhid,
          this.nowcontrolmessage.zhindex
        );
      }, 5000);
    },
    // 处理开关字符串 -- 并且获取所有状态
    handel() {
      if (this.controshebeilist) {
        this.controshebeilist.forEach((item, index) => {
          if (item.enumListType) {
            item["enumListTypetwo"] = this.handeltwo(item.enumListType);
          } else {
            this.$set(item, "enumListValue", 1);
          }

          this.getequipmentStau(item.dataItemId, index);
        });
      }
    },
    handeltwo(str) {
      var controlslist = [];
      // str = "0:关;1:开"
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].length > 0) {
          var diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            value: diy[0]
          });
        }
      }
      return controlslist;
    },
    handelthree(str) {
      var controlslist = [];
      // str = "0:关;1:开"
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i])
        if (arr[i].length > 0) {
          var diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            id: diy[0]
          });
        }
      }
      return controlslist;
    },
    // 获取机器状态
    getequipmentStau(id, indexoo) {
      console.log(this.controshebeilist);

      var data = {
        dataCollectNewId: id
      };
      nowpagereq.getshebeikiaguanstau(data).then(res => {
        if (res.data) {
          let value = res.data[0]?.lastValue1;
          this.$set(
            this.controshebeilist[indexoo],
            "enumListValue",
            value || 1
          );
          if (value === 0) {
            this.$set(this.controshebeilist[indexoo], "nowstau", "已关闭");
            // this.controshebeilist[indexoo].nowstau = "已关闭";
          }
          if (value === 1) {
            // this.controshebeilist[indexoo].nowstau = "已开启";
            this.$set(this.controshebeilist[indexoo], "nowstau", "已开启");
            // console.log(this.controshebeilist)
          }
        } else {
          // this.controshebeilist[indexoo].nowstau = "暂无数据";
          this.$set(this.controshebeilist[indexoo], "nowstau", "暂无数据");
        }
        console.log(this.controshebeilist);
      });
    },
    // 获取机器状态,返回不同颜色
    getequipmentStyle(nowstau) {
      if (nowstau === "已关闭") {
        return "#ff0000";
      }
      if (nowstau === "已开启") {
        return "#00ff33";
      }
    },
    // 获取相机地址
    getcamerurl(e, method = undefined) {
      // this.isshowcameraview = false;
      // if (!e) {
      //   this.isshowcameraview = false
      //   this.Insufficient = true
      //   return
      // } else if (e === "流量不足") {
      //   this.isshowcameraview = false
      //   this.Insufficient = false
      //   return
      // }
      player?.stop();
      if (document.getElementById('video-container-wrap')) {
        let e = document.getElementById("video-container-wrap");
        e.style.display = "none";
      }
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        this.cricleAdd = false;
        clearTimeout(this.timer);
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      } else if (e === "timeout") {
        this.showFace = "timeout";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      setTimeout(() => {
        // 正常播放
        this.showFace = "play";
        console.log(e, method)

        if (player !== null) {
          player.stop();
        }
        if (method !== undefined) {
          player = new EZUIKit.EZUIKitPlayer({ audio: 1, enableSharedArrayBufferGuide: true, width: 1980,
            height: 1080, template: 'security', ...method })
          player.stop().then(() => {
            player.play();
          });
        }
        // this.testsetstyledom()
      }, 200);
    },
    setCameraInfo(cameraInfo) {
      this.$refs.cameracontrol.cameraInfoList = cameraInfo
      this.$refs.cameracontrol.cameraId = cameraInfo.cameraId
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      let dd = e.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.$message.warning("请勿选择此地块组");
        return;
      }
      this.facilityName = e.facilityName;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        this.paramslist["organizationNo"] = sessionStorage.organizationNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        this.paramslist["organizationNo"] = sessionStorage.organizationNo;
        this.getTableDataList();
        this.getcontroshebeilist();
        this.getvrtuallist(this.paramslist);
      }
      // this.paramslist["organizationNo"] = e.organizationNo;

      // facilityGroupNo
      // console.log(this.paramslist);
    },
    // 获取相机列表数据
    getTableDataList() {
      let e = this.paramslist;
      // console.log(e)
      this.paramslist = {};
      if (e.facilityGroupNo) {
        // this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        // let param = {
        //   page: 1,
        //   size: 10
        // };
        // let partwo = {
        //   facilityGroupNo: e.facilityGroupNo
        // };
        // nowpagereq.getlist(param, partwo).then(res => {
        //   let data = res.data.content;
        //   this.cameralist = data;
        // });
        // return;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        let param = {
          page: 1,
          size: 10,
          entity: {
            organizationNo: sessionStorage.organizationNo
          }
        };
        let partwo = {
          facilityNo: e.facilityNo
        };
        nowpagereq.getlist(param, partwo).then(res => {
          let data = res.data.content;
          this.cameralist = data;
        });
      }
    },
    // 尝试直接操作dom元素
    testsetstyledom() {
      var testDiv = document.getElementById("iframe-btn-container");
      testDiv.style.display = "block";
      // for (var i = 0, len = testDiv.style.length; i < len; i++) { // IE 9+、Safari、Chrome、Firefox、Opera 9+
      //   var prop = testDiv.style[i];
      //   var value = testDiv.style.getPropertyValue(prop);
      //   console.log(prop + ": " + value);
      // }
      // testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
      // console.log(testDiv.style.cssText);
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames(e) {
      let nowcamerid = e.cameraid;
      console.log(nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading(durTime, startUp) {
      this.timer = null;
      this.startUp = startUp;
      this.startTime = 60;
      this.cricleAdd = true;
      this.timer = setTimeout(() => {
        this.cricleAdd = false;
      }, durTime * 60000);
    },
    // 填充表格空白行
    addblankmet() {
      let havline = this.tableData.length % 6;
      if (this.tableData.length < 6) {
        if (havline < 6) {
          const remain = 6 - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({ indflag: i + this.tableData.length - 1 });
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .common-layout {
  .zhcontent {
    height: calc(100% - 15px) !important;
    margin: 10px 0;
    overflow: hidden !important;
    position: relative;
  }
}
.tempbut {
  min-width: 40px;
  height: 30px;
  // background-color: rgb(146, 31, 31);
  margin-right: 10px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  color: rgb(206, 201, 201);
  border-radius: 5px;
}
.tempbut:hover {
  color: #feffff;
}
.green {
  background-image: linear-gradient(to bottom, #adec6e, #69d75b, #31c54d);
  border-color: #dce8e6;
}
.tempcolor {
  background-color: #0095b4;
}
.red {
  background-color: #ff0000;
}
.zhdigtwo {
  width: 100%;
  min-height: 400px;
}
.back {
  position: absolute;
  display: flex;
  top: 58px;
  right: 0px;
}
.addback {
  width: 30px;
  height: 30px;
  border: 2px solid #006e91;
  border-radius: 3px;
  // background-size: 30px;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-image: url('~@/assets/commont/add.png');
  cursor: pointer;
  margin-left: 5px;
  i {
    width: 100%;
    height: 100%;
    line-height: 27px;
    font-weight: 600;
    text-align: center;
    color: #006e91;
  }
}
.delback {
  width: 30px;
  height: 30px;
  border: 2px solid #006e91;
  border-radius: 3px;
  // background-size: 30px;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-image: url('~@/assets/commont/dell.png');
  cursor: pointer;
  margin-left: 5px;
  i {
    width: 100%;
    height: 100%;
    line-height: 26px;
    color: #006e91;
    font-weight: 600;
    text-align: center;
  }
}
// 验证码
.dig-yanzhencode {
  width: 100%;
  height: 100px;
  // background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  .changecodeimg {
    width: 100%;
    margin-top: 2px;
    cursor: pointer;
    margin-bottom: 6px;
    white-space: nowrap;
    font-size: 13px;
    color: #fff;
    border-bottom: #fff 1px solid;
  }
  .changecodeimg:hover {
    color: rgb(26, 170, 175);
    border-color: rgb(26, 170, 175);
  }
}
.dig-message {
  color: #959595;
  width: 100%;
  min-height: 400px;
  max-height: 600px;
  overflow: auto;
  .dig-tip {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    margin-bottom: 2px;
    color: #959595;
    // color: #e2e2e261;
  }
  .dig-line {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    .dig-line-item {
      color: #000;
      // width: 46%;
      margin-right: 2%;
      align-items: center;
      height: 50px;
      display: flex;
    }
  }
  .dig-view {
    border: 1px dashed #e2e2e261;
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    position: relative;
    .dig-view-title {
      color: #006e91;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }
    .dig-view-main {
      width: calc(100% - 60px);
      height: 60px;
      display: flex;
      align-items: center;
      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;
        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }
    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;
      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        // background-color: rgb(204, 184, 184);
        text-align: center;
        line-height: 20px;
      }
      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        // background-color: rgb(204, 184, 184);
        line-height: 20px;
        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }
        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }
  .dig-views {
    border: 1px dashed #e2e2e261;
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d3d9e2;
    .dig-view-title {
      color: #006e91;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }
    > div {
      width: 50%;
    }
    .dig-view-main {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;
        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }
    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;
      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        // background-color: rgb(204, 184, 184);
        text-align: center;
        line-height: 20px;
      }
      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        // background-color: rgb(204, 184, 184);
        line-height: 20px;
        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }
        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }
  .celuconfigshowview {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
    > div:first-child {
      color: #006e91;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
    }
    .showviewbut {
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0;
    }
  }
}
::v-deep .yanzheng {
  .el-dialog {
    min-width: 20% !important;
    height: 30vh !important;
    // margin-top: 20vh !important;
    position: relative;
    .el-dialog__body {
      height: 18vh;
      padding-left: 50px !important;
    }
  }
}
::v-deep .el-dialog {
  .el-dialog__header .el-dialog__title {
    color: #fff;
  }
  // background-color: rgba($color: #00202a, $alpha: 0.8);
  background-color: #005d7b;
  border: #23fff8 1px solid;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    .el-form-item {
      display: flex;
      .el-form-item__label {
        min-width: 120px;
        text-align: end;
      }
      .el-input__inner {
        border: none;
        color: #000 !important;
      }
    }
  }
}
.celu-but {
  // width: 100px;
  margin-top: 10px;
  padding: 0 15px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
  background: linear-gradient(180deg, #0098b7 0%, #76f5d2 100%);
  border-radius: 29px;
  // background-image: linear-gradient(to bottom, #43e5f7, #24bbca, #0f9fab);
}
.celu-but:hover {
  color: #838c8d;
}
// ::v-deep .el-select .el-input__inner {
/*color: #dbe9e9 !important;*/
// }
.main {
  width: 100%;
  height: 100%;
}
.farm-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: flex-start;
  justify-content: space-around;
  align-items: center;
  .tr-sid {
    width: calc(20% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 0 10px 10px;
    background-color: #074052;
    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
    }
  }
  .cameraview-box {
    width: calc(60% - 10px);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .cameraview-box-one {
      border: 8px double #fff;
      background-color: #363839;
      width: 74%;
      height: calc(100% - 51%);
      position: relative;
      .cricle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .allScream {
        position: absolute;
        font-size: 16px;
        right: 10px;
        bottom: 10px;
      }
    }
    .allcameramain {
      height: calc(100% - 51%);
      width: 25%;
    }
    .cameraview-box-two-line {
      width: 100%;
      height: 30px;
      line-height: 30px;
      position: relative;
      top: 12px;
      font-size: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
      .cameraview-box-two-line-title {
        width: 180px;
        height: 38px;
        line-height: 36px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("~@/assets/commont/top-hexagon.png");
        // background-color: #003947;
      }
    }
    .cameraview-box-two {
      width: 100%;
      height: 100%;
      background-color: #044a6090;
      border: 1px solid #1093b6;
      border-radius: 8px 8px 0px 0px;
      padding: 35px 15px 15px 15px;
      // padding: 10px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: flex-start;
      justify-content: space-between;
      overflow: auto;
      .zh-contro {
        width: 230px;
        height: 90px;
        // border: #fff 1px solid;
        border-radius: 5px;
        border: 1px solid #1093b6;
        margin: 5px 0;
        display: flex;
        flex-wrap: wrap;
        .contro-one {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .contro-one-title {
            font-size: 16px;
            width: calc(100% - 60px);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .contro-one-stau {
            font-size: 17px;
            width: 60px;
          }
        }
        .contro-two {
          width: 250px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: relative;
          .contro-two-zcon {
            border: solid 1px #00718f;
            height: 30px;
            width: 70px;
            line-height: 28px;
            text-align: center;
            font-size: 16px;
            border-radius: 15px;
            cursor: pointer;
          }
          .contro-two-zcon-disabled {
            border: solid 1px #00718f;
            height: 30px;
            width: 70px;
            line-height: 28px;
            text-align: center;
            font-size: 16px;
            border-radius: 15px;
            cursor: not-allowed;
          }
          .contro-two-zcon:hover {
            background: linear-gradient(180deg, #76f5d2 0%, #0098b7 100%);
            color: #fff;
          }
          .contro-two-zcon-select {
            background-color: #fff;
            color: #003947;
          }
          .contro-two-zcons {
            background-color: #fff;
            color: #003947;
          }
          .inputnumber {
            width: 70px;
            border-radius: 10rpx;
          }
          .unit {
            position: absolute;
            top: 15px;
            left: 95px;
          }
        }
      }
    }
  }
  .cameralist-box {
    width: calc(20% - 20px);
    height: 100%;
    text-align: center;
    position: relative;
    .cameraview-box-two-line {
      width: 100%;
      height: 30px;
      line-height: 30px;
      position: absolute;
      top: 0px;
      font-size: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
      .cameraview-box-two-line-title {
        width: 180px;
        height: 38px;
        line-height: 36px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("~@/assets/commont/top-hexagon.png");
        // background-color: #607277;
      }
    }
    .cameraview-box-two {
      width: 100%;
      height: calc(100% - 2.8%);
      background-color: #044a6090;
      border: 1px solid #1093b6;
      border-radius: 8px 8px 0px 0px;
      padding: 10px;
      padding-top: 20px;
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      // overflow: auto;
      .zh-contro {
        width: 250px;
        height: 90px;
        border: #fff 1px solid;
        border-radius: 5px;
        margin: 5px 0;
        .contro-one {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .contro-one-title {
            font-size: 16px;
          }
          .contro-one-stau {
            font-size: 17px;
          }
        }
        .contro-two {
          width: 250px;
          display: flex;
          justify-content: space-around;
          .contro-two-zcon {
            border: solid 1px #fff;
            height: 30px;
            width: 100px;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            border-radius: 5px;
            cursor: pointer;
          }
          .contro-two-zcon:hover {
            background-color: #fff;
            color: #003947;
          }
          .contro-two-zcon-select {
            background-color: #fff;
            color: #003947;
          }
          .contro-two-zcons {
            background-color: #fff;
            color: #003947;
          }
        }
      }
      .cameraview-box-main {
        // height: 30%;
        height: 90%;
        width: 100%;
        .dig-view {
          // border: 1px dashed #e2e2e261;
          width: 100%;
          height: 99%;
          overflow-y: auto;
          padding: 20px 5px 5px 5px;
          min-height: 100px;
          margin-top: 10px;
          > div {
            border: 1px solid #005e77;
            width: 100%;
            opacity: 1;
            border-radius: 8px 8px 0px 0px;
            padding: 8px;
            position: relative;
            .title-1 {
              display: inline-block;
              width: 90%;
              left: 5%;
              position: absolute;
              top: -1px;
              border-top: 1px solid;
              border-image: linear-gradient(
                  90deg,
                  #005e7700,
                  #00fff7,
                  #005e7700
                )
                30 1;
            }
            .dig-view-item-title {
              position: absolute;
              top: -24px;
              width: 70%;
              text-align: center;
              left: 15%;
              background-color: #013b4d;
              color: #00fff7;
              font-weight: 500;
              padding: 1px 10px;
              border-radius: 18px;
              border: 1px solid #00fff7;
              box-shadow: 0px 0px 9px #1093b6 inset;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            > div {
              text-align: start;
              margin-top: 10px;
              background-color: #023d50;
              opacity: 1;
              border-radius: 8px 8px;
              padding: 0 15px 10px;
              box-sizing: border-box;
              line-height: 24px;
              letter-spacing: 1px;
              hr {
                height: 1px;
                border: none;
                border-top: 1px dashed #ffffff80;
              }
            }
          }
          .dig-view-item-name {
            display: flex;
            align-items: center;
            width: 100%;
            margin-top: 5px;
            height: 30px;
            line-height: 30px;
            .dig-view-item-name-line2 {
              width: 50px;
              height: 20px;
              margin-right: 5px;
              color: #fff;
              border-radius: 20px;
              // background-color: rgb(204, 184, 184);
              text-align: center;
              line-height: 20px;
            }
            .dig-view-item-name-line3 {
              width: 150px;
              height: 20px;
              margin-left: 10px;
              color: #fff;
              // background-color: rgb(204, 184, 184);
              line-height: 20px;
              ::v-deep.el-input__inner {
                width: 120px;
                height: 30px;
                line-height: 20px;
                display: flex;
                align-items: center;
              }
              ::v-deep.el-input--medium .el-input__icon {
                line-height: 13px;
              }
            }
          }
        }
      }
      .cameracontrol-box {
        width: 100%;
        height: 60%;
      }
      .celuconfigshowview {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        .showviewbut {
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          padding: 0;
        }
      }
    }
  }
  .input-yem-sty {
    width: 200px;
    margin-left: 5%;
    margin-right: 2%;
  }
}
// 无数据 提示
.cameraview-box-two-ds {
  display: flex;
  justify-content: center !important;
  align-items: center;
  h2 {
    font-size: 27px;
    letter-spacing: 4px;
  }
}
::v-deep .el-input__inner {
  border-radius: 5px;
}
// ::v-deep .iframe-btn-container{
//   display: block;
// }
::v-deep .el-input-number.is-controls-right .el-input-number__decrease,
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
  background: transparent;
  border-left-style: 0;
  display: none;
}
::v-deep .el-input-number.is-controls-right .el-input__inner {
  padding-left: 10px;
  padding-right: 10px;
}#video-container {
  width: 100% !important;
  height: 100% !important;
}
::v-deep {
  #video-container-wrap {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
      #video-container-headControl {
        display: none !important;
      }
    #video-container {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    .video-containerparent-wnd {
      > div {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
    #video-containercanvas0 {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    }
  }
  }
}
</style>
